<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-07-23 09:30:59
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-09-03 13:02:02
 * @FilePath: /anxinxiu/src/subpages/coupon.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <van-nav-bar
      title="我的券包"
      class="nav_bar"
      fixed
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-tabs
      v-model="active"
      type="card"
      title-active-color="#303030"
      title-inactive-color="#999"
      color="#fff"
      @change="tabsChange"
    >
      <van-tab title="全部" :name="''"> </van-tab>
      <van-tab title="未使用" :name="1"> </van-tab>
      <van-tab title="已使用" :name="2"> </van-tab>
      <van-tab title="已失效" :name="3"> </van-tab>
    </van-tabs>

    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <Coupon
          v-for="item in list"
          :key="item.id"
          :item="item"
          :status="item.status"
          @showQR="showQR"
        ></Coupon>
      </van-list>
    </div>
    <van-popup v-model="show" :close-on-click-overlay="false">
      <div class="qr_content">
        <QRCode v-if="src" ref="qr" :url="src"></QRCode>
        <div class="close" @click="show = false">x</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  components: {
    Coupon: () => import("@/components/coupon"),
    QRCode: () => import("@/components/qrCode.vue"),
  },
  data() {
    return {
      loading: false,
      finished: false,
      active: 0,
      query: {
        couponStatus: "",
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      show: false,
      src: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getCouponList() {
      api
        .my_coupon_list(this.query)
        .then((res) => {
          if (res.data.length == 0) this.finished = true;
          this.list = [...this.list, ...res.data];
          if (res.data.length < this.query.pageSize) {
            this.finished = true;
          } else {
            this.query.pageNum++;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onLoad() {
      this.getCouponList();
    },
    tabsChange() {
      this.query.couponStatus = this.active;
      this.query.pageNum = 1;
      this.list = [];
      this.loading = true;
      this.finished = false;
      this.onLoad();
    },
    showQR(item) {
      // this.src = `${item.checkUrl}?couponSn=${item.couponSn}&amount=${item.price}`;
      this.src = `http://192.168.31.183:9000/#/couponWriteOff?couponSn=${item.couponSn}&amount=${item.price}`;
      this.show = true;
    },
  },
};
</script>

<style scoped lang="less">
.home {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 200px 50px 100px 50px;
  overflow: hidden;

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }
  .qr_content {
    padding: 50px;
    position: relative;
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      line-height: 50px;
      text-align: center;
    }
  }
}
</style>
